<template>
  <div class="real-image">
    <div class="card flex-column" :class="statusClass(item.status)" v-for="item in data">
      <div class="l-1 flex-between">
        <div class="left">{{item.siteName}}</div>
        <div class="right flex-box">
          <div class="detail">附件</div>
          <div class="detail ml-20" @click="detailClick(item)">详情</div>
        </div>
      </div>
      <div class="l-2 flex-box">
        <span class="name">{{item.experimentName}}</span>
        <img class="ml-20" src="../../assets/imgs/video_icon.png" alt="">
      </div>
      <span class="status" :class="statusNameClass(item.status)">{{item.statusName}}</span>
      <div class="l-3 info flex-box">
        <div class="flex-column item">
          <span>名字</span>
          <span>{{item.customName}}</span>
        </div>
        <div class="flex-column item">
          <span>职位</span>
          <span>{{item.position||'未知'}}</span>
        </div>
        <div class="flex-column item">
          <span>电话</span>
          <span>{{item.experimentUserPhone||'未知'}}</span>
        </div>
      </div>
      <div class="date">{{item.experimentStartTime|time}} - {{item.experimentEndTime|time}}</div>

    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    name:'RealImage',
    props:{
      data:{
        type:Array,
        default:[]
      }
    },
    filters:{
      time(val){
        return moment(val).format('YYYY-MM-DD HH:mm')
      }
    },
    data(){
      return{

      }
    },
    methods:{
      statusClass(status){
        switch (status) {
          case 0:
            return 'working';
          case 1:
            return  'stop';
          case 3:
            return 'error'
        }
      },
      statusNameClass(status){
        switch (status) {
          case 0:
            return 'working';
          case 1:
            return  'stop';
          case 3:
            return 'error'
        }
      },
      detailClick(item){
        this.$emit('detailClick',{
          type:'experimental',
          id:item.id,
        })

      }
    }
  }
</script>
<style lang="scss" scoped>
  .real-image{
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2,1fr);
    .card{
      padding: 39px;
      font-weight: bold;
      &.working{
        background: rgba(0, 245, 184, .24);
        .status{
          color: #16B1FD;
        }
      }
      &.stop{
        background: rgba(255, 255, 255, 0.2);
        .status{
          color: #B7B7B7;
        }
      }
      &.error{
        background: rgba(254, 42, 33, .2);
        .status{
          color: #FF0E0E;
        }
      }
      .l-1{

        .left{
          background: url("../../assets/imgs/site_bg.png")no-repeat;
          padding: 15px 20px;
          background-size: 100% 100%;
          color: #28F2E6;
          font-size: 40px;
        }
        .detail{
          font-size: 34px;
          line-height: 52px;
          text-align: center;
          color: #8EBBFE;
          width: 130px;
          height: 52px;
          background: url("../../assets/imgs/fj_bg.png")no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

        }
      }
      .l-2{
        margin-top: 40px;
        .name{
          font-size: 46px;
          font-family: title-font;
          font-weight: 400;
          font-style: italic;
          color: #FFFFFF;
        }
      }
      .status{
        font-size: 35px;
        margin-top: 10px;
        font-style: italic;
        &.working{
          color: #16B1FD;
        }
        &.stop{
          color: #B7B7B7;
        }
        &.error{
          color: #FF0E0E;
        }
      }
      .l-3{
        margin-top: 50px;
        font-size: 35px;
        .item{
          span:nth-child(2){
            color: #fff;
          }
        }
        .item+.item{
          margin-left: 40px;
        }
      }
      .date{
        margin-top: 50px;
        color: #859DC1;
        font-size: 34px;
      }
    }
  }
</style>
